<template>
  <div>
    <viewer :images="images" :options="options" class="viewer" ref="Viewer" @inited="inited" v-if="images && images.length">
      <img v-for="item in images" :src="item.Path" :data-source="item.Path" :key="item.Path" class="image" />
    </viewer>
  </div>
</template>

<script lang="ts">
import { defineComponent, reactive, ref, onMounted, PropType } from "vue";
export interface IProps {
  Path: string;
}
export default defineComponent({
  props: {
    images: {
      type: Array as PropType<IProps[] | any>,
      default: () => {
        return [];
      }
    }
  },
  setup(props, context) {
    const options = reactive({
      url: "data-source"
    });
    console.log(props.images);

    const index = ref(0);
    const Viewer = ref();
    function inited(viewer: any) {
      Viewer.value = viewer;
      Viewer.value.view(index.value);
    }
    function view(index: { value: any }) {
      index.value = index;
      Viewer.value.view(index.value);
    }
    onMounted(() => {
      console.log("图片预览", props.images);
    });
    return {
      options,
      index,
      Viewer,
      inited,
      view
    };
  }
});
</script>

<style lang="scss" scoped>
.image {
  display: none;
}
</style>
<style>
.viewer-loading > img {
  display: none;
}
</style>
